<template>
    <div class="container">
        <div class="apply-container">
            <div class="apply-container-head"></div>
            <div class="apply-container-body">
                <div class="apply-container-body-title">
                    <div class="apply-container-body-title-font">用车申请部门审批</div>
                    <div class="apply-container-body-title-return">
                        <el-button size="small" @click="goBackPage">返回</el-button>
                    </div>
                </div>
                <el-divider class="apply-container-body-title-line"></el-divider>
                <div class="model-title">申请信息</div>
                <div class="apply-container-body-content">
                    <el-form :model="AutoOrder" label-width="100px" label-position="LabelPosition" disabled
                        style="width: 100%;">
                        <el-form-item label="用车部门:" prop="userDepartment" style="width: 40%;">
                            <el-select v-model="AutoOrder.userDepartment" placeholder="请选择用车部门" clearable></el-select>
                        </el-form-item>
                        <el-form-item label="姓名:" prop="userName" style="width: 40%;">
                            <el-input v-model="AutoOrder.userName" placeholder="请输入姓名" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="工号:" prop="userId" style="width: 40%;">
                            <el-input v-model="AutoOrder.userId" placeholder="请输入工号" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="申请人电话:" prop="userPhone" style="width: 40%;">
                            <el-input v-model="AutoOrder.userPhone" placeholder="请输入申请人电话" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="车型:" prop="autoType" style="width: 40%;">
                            <el-select v-model="AutoOrder.autoType" placeholder="请选择车型" clearable></el-select>
                        </el-form-item>
                        <el-form-item label="成员数:" prop="passengerNum" style="width: 40%;">
                            <el-input v-model="AutoOrder.passengerNum" placeholder="请输入成员数" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="用车时间:" prop="autoStartTime" style="width: 40%;">
                            <el-date-picker v-model="AutoOrder.autoStartTime" type="datetime"
                                value-format="yyyy-MM-dd-HH-mm" placeholder="请选择日期时间" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item label="截止时间:" prop="autoArriveTime" style="width: 40%;">
                            <el-date-picker v-model="AutoOrder.autoArriveTime" type="datetime"
                                value-format="yyyy-MM-dd-HH-mm" placeholder="请选择日期时间" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item label="目的地:" prop="userDestination" style="width: 50%;">
                            <el-input v-model="AutoOrder.userDestination" placeholder="请输入目的地" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="用车事由:" prop="autoUseReason" style="width: 50%;">
                            <el-input v-model="AutoOrder.autoUseReason" type="textarea" placeholder="请输入内容" maxlength="100"
                                show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <el-divider class="apply-container-body-title-line"></el-divider>
                <div class="model-title">用车委派信息</div>
                <div class="apply-container-body-approval">
                    <el-form :model="Approval" label-width="125px" label-position="LabelPosition" style="width: 100%;">
                        <el-form-item label="审批人:" prop="OrderApprover" style="width: 20%;">
                            <el-radio-group v-model="Approval.OrderApprover" disabled>
                                <el-radio :label="Approval.OrderApprover"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="审批意见:" prop="ApprovalResult" style="width: 35%;">
                            <el-radio-group v-model="Approval.ApprovalResult" disabled>
                                <el-radio label="同意"></el-radio>
                                <el-radio label="不同意"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="审批备注:" prop="ApprovalDescribe" style="width: 55%;">
                            <el-input v-model="Approval.ApprovalDescribe" type="textarea" disabled placeholder="请输入内容"
                                maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="apply-container-footer"></div>
        </div>
    </div>
</template>
  
<script>
import { getAutoOrderById } from '@/api/approval.js'
import { getAutoDepartmentApproval } from '@/api/approval.js'
export default {
    name: 'AutoDepartmentApprovalDoneView',
    data() {
        return {
            LabelPosition: 'right',
            AutoOrder: {
                userDepartment: null,
                userName: null,
                userId: null,
                userPhone: null,
                autoType: null,
                passengerNum: null,
                autoStartTime: null,
                autoArriveTime: null,
                userDestination: null,
                autoUseReason: null,
            },
            Approval: {
                OrderApprover: null,
                ApprovalResult: null,
                ApprovalDescribe: null,
            },
            ApprovalData: null,
            AutoOrderId: null, //待办转入
            UserId: null,
        }
    },

    methods: {
        GetAutoOrderById() {
            return new Promise((resolve, reject) => {
                getAutoOrderById(this.AutoOrderId)
                    .then(res => {
                        const temp = res.data.data;
                        this.AutoOrder = temp;
                        if (res.data.code === '0') {
                            console.log(res.data.code);
                            resolve(); // 表示异步操作成功
                        } else {
                            console.log(res.data.msg);
                            reject(res.data.msg); // 表示异步操作失败
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        reject(err); // 处理异步错误
                    })
            });
        },
        //获取部门审批数据
        GetAutoDepartmentApproval() {
            return new Promise((resolve, reject) => {
                getAutoDepartmentApproval(this.AutoOrderId)
                    .then(res => {
                        if (res.data.code === '0') {
                            this.ApprovalData = res.data.data;
                            this.Approval.OrderApprover = this.ApprovalData.orderApprover
                            this.Approval.ApprovalResult = this.ApprovalData.approvalResult
                            this.Approval.ApprovalDescribe = this.ApprovalData.approvalDescribe
                            resolve(); // 表示异步操作成功
                        } else {
                            console.log(res.data.msg);
                            reject(res.data.msg); // 表示异步操作失败
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        reject(err); // 处理异步错误
                    })
            });
        },
        goBackPage() {
            this.$router.go(-1)
        },
        InitData() {
            return new Promise((resolve, reject) => {
                try {
                    this.AutoOrderId = this.$route.query.OrderId;
                    resolve(); // 表示异步操作成功
                } catch (error) {
                    console.log(error);
                    reject(error); // 处理异步错误
                }
            });
        },
    },

    created() {
        this.InitData()
            .then(() => this.GetAutoOrderById())
            .then(() => this.GetAutoDepartmentApproval())
    },
}
</script>
  
<style scoped>
.container {
    /* height: 100%; */
    width: 95%;
    margin: 0 auto;
    background-color: #ffffff;
    margin-top: 1%;
}

.apply-container {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    /* background-color: #f2f2f2; */

}

.apply-container-head {
    width: 95%;
    height: 30px;
    margin: 0 auto;
}

.apply-container-body {
    width: 95%;
    height: 92%;
    margin: 0 auto;
    background-color: #ffffff;

}

.apply-container-body-title {
    width: 98%;
    height: 5%;
    margin: 0 auto;
    display: flex;
}

.apply-container-body-title-return {
    width: 100%;
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
}

.apply-container-body-title-line {
    height: 1px;
    width: 98%;
    margin: 5px auto;
}

.apply-container-body-title-font {
    width: 100%;
    height: 99%;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    padding-top: 10px;
}

.apply-container-body-content {
    width: 85%;
    height: 60%;
    margin: 20px auto;
    display: flex;

}

.apply-container-body-content-submit {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.apply-container-body-approval {
    width: 85%;
    height: 40%;
    margin: 20px auto;
    display: flex;

}

.apply-container-footer {
    width: 95%;
    height: 10px;
    margin: 0 auto;
}

.model-title {
    font-weight: bold;
}
</style>